import React from 'react';
import { Link } from 'react-router-dom';

import styles from './index.module.less';

export default class IndustryInformation extends React.Component {
  state={
    newList: [
      { img1: require('../../../asset/images/infomation/info1.png'),
        title1: '东莞回收钢结构铁皮棚佛山自动化…',
        img2: require('../../../asset/images/infomation/info2.png'),
        img3: require('../../../asset/images/infomation/info3.png'),
      },
    ],
    infoList: [
      {
        title: '淘米水＂废物利用＂ 护肤去垢少不了',
        text: '解读 : 那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风 , 看看市场反应 , 如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身...',
        from: '中国纸业网',
        date: '2018-09-21 12:12',
      },
      {
        title: '淘米水＂废物利用＂ 护肤去垢少不了',
        text: '解读 : 那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风 , 看看市场反应 , 如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身...',
        from: '中国纸业网',
        date: '2018-09-21 12:12',
      },
      {
        title: '淘米水＂废物利用＂ 护肤去垢少不了',
        text: '解读 : 那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风 , 看看市场反应 , 如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身...',
        from: '中国纸业网',
        date: '2018-09-21 12:12',
      },
    ],
  };
  render() {
    const { newList, infoList } = this.state;
    return (
      <div className={styles.IndustryInformation}>
        <div className={styles.header}>
          <span className={styles.s1}></span>
          <span className={styles.s2}>行业资讯</span>
          <span className={styles.s3}>Industry information</span>
        </div>
        <div className={styles.content}>
          <div className={styles.contentLeftBox}>
            <div className={styles.text}>
              <span>热点新闻</span>
              <Link className={styles.tex} to="/news/latestnew">更多</Link>
            </div>
            {
              newList.map((item, index) => {
                return (
                  <div className={styles.box} key={index}>
                    <div className={styles.leftBox}>
                      <img src={item.img1} alt=""/>
                      <div className={styles.desc}>{item.title1}</div>
                    </div>
                    <div className={styles.rightBox}>
                      <div className={styles.rightBoxTop}>
                        <div className={styles.rightBoxTop1}>
                          <img src={item.img2} alt=""/>
                          <div className={styles.desc2}>
                            <dl>
                              <dt>
                                新政策、新机遇助力湖南长沙建筑垃圾回收利用项目
                              </dt>
                              <dd>
                              三、湖南建筑垃圾回收处理发展前景以及管理规定 众所周知,只有将建筑垃圾做到从产生、运输到处置全过程...
                              </dd>
                            </dl>
                          </div>
                        </div>
                        <div className={styles.rightBoxTop2}>
                          <img src={item.img3} alt=""/>
                          <div className={styles.desc2}>
                            <dl>
                              <dt>
                                新政策、新机遇助力湖南长沙建筑垃圾回收利用项目
                              </dt>
                              <dd>
                              三、湖南建筑垃圾回收处理发展前景以及管理规定 众所周知,只有将建筑垃圾做到从产生、运输到处置全过程...
                              </dd>
                            </dl>
                          </div>
                        </div>
                      </div>
                      <div className={styles.rightBoxBottom}>
                        <div className={styles.rightBoxBottom1}>
                          <img src={item.img2} alt=""/>
                          <div className={styles.desc2}>
                            <dl>
                              <dt>
                                新政策、新机遇助力湖南长沙建筑垃圾回收利用项目
                              </dt>
                              <dd>
                              三、湖南建筑垃圾回收处理发展前景以及管理规定 众所周知,只有将建筑垃圾做到从产生、运输到处置全过程...
                              </dd>
                            </dl>
                          </div>
                        </div>
                        <div className={styles.rightBoxBottom2}>
                          <img src={item.img3} alt=""/>
                          <div className={styles.desc2}>
                            <dl>
                              <dt>
                                新政策、新机遇助力湖南长沙建筑垃圾回收利用项目
                              </dt>
                              <dd>
                              三、湖南建筑垃圾回收处理发展前景以及管理规定 众所周知,只有将建筑垃圾做到从产生、运输到处置全过程...
                              </dd>
                            </dl>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })
            }
          </div>
          <div className={styles.contnetRightBox}>
            <div className={styles.text}>
              <span>最新资讯</span>
              <Link className={styles.tex} to="/news/latestnew">更多</Link>
            </div>
            <div className={styles.textBox}>
              {
                infoList.map((item, index) => {
                  return (
                    <ul key={index}>
                      <li className={styles.l1}><Link to="/news-details">{item.title}</Link></li>
                      <li className={styles.l2}><Link to="/news-details">{item.text}</Link></li>
                      <li className={styles.l3}>
                        <span>来源：</span>
                        <span className={styles.s2}><Link to="/">{item.from} | {item.date}</Link></span>
                        <div>
                          <span><i className={`iconfont icon-chakan ${styles.chakanIcon}`}></i>&nbsp;2&nbsp;&nbsp;</span>
                          <span><i className={`iconfont icon-dianzan ${styles.chakanIcon}`}></i>&nbsp;2&nbsp;</span>
                        </div>
                      </li>
                    </ul>
                  );
                })
              }

            </div>
          </div>
          <div className={styles.clearfix}></div>
        </div>
      </div>
    );
  }
}
